<template>
	<div class="choose-coupon">
		<div class="top">
			<goback></goback>优惠券选择
		</div>
		<ul class="list">
			<li class="no-use" @click='chooseCoupon'>
				<div class="content">不使用优惠券</div>
				<div class="btn">
					<input type="radio" :id='00' name="radio-1-set" class="regular-radio" checked="">
					<label :for='00'><div class="btn iconfont icon-checked"></div></label>
				</div>
			</li>
			<li v-for='item in couponList' @click='chooseCoupon'>
				<div class="left">

					<div class="price">{{item.price}}<span>元</span></div>
					<div class="txt">
						<div>{{item.name}}</div>
						<div>有效期：{{item.date}}</div>
					</div>
					<div class="circle-top"></div>
					<div class="circle-down"></div>
				</div>
				<div class="right">
					<input type="radio" :id='item.id' name="radio-1-set" class="regular-radio">
					<label :for='item.id'><div class="btn iconfont icon-checked"></div></label>
				</div>
			</li>
		</ul>
	</div>
</template>
<script>
	import goback from '../common/goback';
	export default {
		data() {
				return {
					couponList: [{
						name: '现金券APP专享',
						date: '2015.2.12—2018.5.17',
						price: '10',
						id: '01'

					}, {
						name: '现金券APP专享',
						date: '2015.2.12—2018.5.17',
						price: '10',
						id: '02'

					}]

				}
			},
			components: {
				goback
			},
			methods: {
				chooseCoupon: function(e) {

				}
			}
	}
</script>
<style lang="scss">
	@import "../../assets/css/_functions.scss";
	@import "../../assets/css/_variables.scss";
	body {
		background: #eeeeee!important;
	}
	
	.choose-coupon {
		.top {
			width: rem(375);
			height: rem(46);
			position: relative;
			text-align: center;
			line-height: rem(46);
			font-size: rem(17);
			color: #030303;
			text-align: center;
			background: #fff;
			.goback {
				background: none;
				color: #666;
			}
		}
		.list {
			.no-use {
				width: rem(345);
				height: rem(40);
				margin-left: rem(15);
				margin-top: rem(15);
				margin-bottom: rem(15);
				background: #fff;
				background: #ffffff;
				border-radius: 4px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.content {
					font-size: rem(15);
					color: $_999;
					padding-left: rem(13);
				}
				.btn {
					label {
						position: absolute;
						width: 100%;
						height: 100%;
						right: 0;
						top: 0;
						border-radius: 0;
						display: flex;
						align-items: center;
						justify-content: flex-end;
					}
				}
			}
			li {
				width: rem(345);
				height: rem(78);
				margin-left: rem(15);
				background: #fff;
				border-left: rem(5) solid #0299f6;
				background: #ffffff;
				border-radius: 5px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: rem(15);
				position: relative;
				.left {
					display: flex;
					align-items: center;
					overflow: hidden;
					position: relative;
					.price {
						width: rem(84);
						height: rem(78);
						line-height: rem(78);
						border-right: 1px dashed #ccc;
						color: #0299f6;
						font-size: rem(36);
						margin-right: rem(13);
						margin-left: rem(13);
						span {
							font-size: rem(15);
						}
					}
					.txt {
						div:nth-of-type(1) {
							font-size: rem(15);
							line-height: rem(15);
							color: #030303;
						}
						div:nth-of-type(2) {
							font-size: rem(13);
							line-height: rem(13);
							color: #999999;
							margin-top: rem(8);
						}
					}
					.circle-top {
						width: rem(10);
						height: rem(10);
						border-radius: 100%;
						position: absolute;
						background: #eee;
						left: rem(91.5);
						top: rem(-5);
					}
					.circle-down {
						width: rem(10);
						height: rem(10);
						border-radius: 100%;
						position: absolute;
						background: #eee;
						left: rem(91.5);
						bottom: rem(-5);
					}
				}
				.right {
					label {
						position: absolute;
						width: 100%;
						height: 100%;
						right: 0;
						top: 0;
						border-radius: 0;
						display: flex;
						align-items: center;
						justify-content: flex-end;
					}
				}
			}
		}
	}
	
	.regular-radio {
		display: none;
	}
	
	.regular-radio+ label>div {
		width: rem(20);
		height: rem(20);
		line-height: rem(20);
		text-align: center;
		border-radius: 100%;
		border: 1px solid $_999;
		margin-right: rem(14);
		color: #fff;
	}
	
	.regular-radio:checked+ label>div {
		border: 1px solid $blue;
		background: $blue;
		width: rem(20);
		height: rem(20);
		line-height: rem(20);
		text-align: center;
		border-radius: 100%;
	}
</style>